<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>IMYOURS | 消息中心</title>

<link rel="stylesheet" href="./css/reset.css" type="text/css"
	media="screen" title="no title" />
<link rel="stylesheet" href="./css/text.css" type="text/css"
	media="screen" title="no title" />
<link rel="stylesheet" href="./css/form.css" type="text/css"
	media="screen" title="no title" />
<link rel="stylesheet" href="./css/buttons.css" type="text/css"
	media="screen" title="no title" />
<link rel="stylesheet" href="./css/grid.css" type="text/css"
	media="screen" title="no title" />
<link rel="stylesheet" href="./css/layout.css" type="text/css"
	media="screen" title="no title" />

<link rel="stylesheet"
	href="./css/ui-darkness/jquery-ui-1.8.12.custom.css" type="text/css"
	media="screen" title="no title" />
<link rel="stylesheet" href="./css/plugin/jquery.visualize.css"
	type="text/css" media="screen" title="no title" />
<link rel="stylesheet" href="./css/plugin/facebox.css" type="text/css"
	media="screen" title="no title" />
<link rel="stylesheet" href="./css/plugin/uniform.default.css"
	type="text/css" media="screen" title="no title" />
<link rel="stylesheet" href="./css/plugin/dataTables.css"
	type="text/css" media="screen" title="no title" />

<link rel="stylesheet" href="./css/custom.css" type="text/css"
	media="screen" title="no title">

<style>
.logDiv {
	background-color: white;
	color: black;
	height: 200px;
	width: 100%;
	overflow-y: auto;
}

.sends {
	width: 100%;
}

.sendta {
	height: 80px;
	width: 70%;
}

.snedbtn {
	height: 91px;
	width: 24%;
	right: 14px;
	bottom: 12px;
	position: absolute;
}

textarea {
	resize: none;
	height: 99px;
}

.mysend {
	color: green;
}

.othersend {
	color: blue;
}


.announcementContent {
    font-size: 21px;
}
.announcementDate {
    color: grey;
}
.announcementBox {
    background-color: #fcfb8f;
}
.announcementSender {
    color: green;
}
</style>
</head>

<body>

	<div id="wrapper">

		<div id="top">

			<div class="content_pad">
				<ul class="right">
					<li><a href="javascript:;" class="top_icon"><span
							class="ui-icon ui-icon-person" id="useruser"></span></a></li>
					<li><a href="javascript:;" class="new_messages top_alert"
						id="unreadMsgTip"></a></li>
					<li><a href="./pages/settings.html">Settings</a></li>
					<li><a href="javascript:parent.logout();">退出登录</a></li>
				</ul>
			</div>
			<!-- .content_pad -->

		</div>
		<!-- #top -->

		<div id="header">

			<div class="content_pad">
				<h1>
					<a href="index.html">IMYOURS</a>
				</h1>

				<ul id="nav">
					<li class="nav_current nav_icon"><a href="./index.html"><span
							class="ui-icon ui-icon-home"></span>消息中心</a></li>


					<li class=" nav_icon"><a href="./pages/friendList.html"><span
							class="ui-icon ui-icon-gripsmall-diagonal-se"></span>好友列表</a></li>

					<li class="nav_icon"><a href="./pages/companyStruct.html"><span
							class="ui-icon ui-icon-gear"></span>公司结构</a></li>
					<li class="nav_icon"><a href="./pages/admin.html"><span
							class="ui-icon ui-icon-signal"></span>管理页</a></li>

					
				</ul>
			</div>
			<!-- .content_pad -->

		</div>
		<!-- #header -->

		<div id="masthead">

			<div class="content_pad">

				<h1 class="no_breadcrumbs">消息中心</h1>

				<div id="search">
					<form action="/search" method="get">
						<input type="text" value="" placeholder="Search" name="search"
							id="search_input" title="Search" /> <input type="submit"
							value="" name="submit" class="submit" />
					</form>
				</div>
				<!-- #search -->

			</div>
			<!-- .content_pad -->

		</div>
		<!-- #masthead -->

		<div id="content" class="xgrid">
			<div class="x6" ><h2>公告消息</h2></div>
			<div class="x2"><button onclick="loadAnnouncement()" class="btn btn-orange">刷新</button></div>
			<div id="newMessageBoard" class="x8" style="height: 400px;"></div>
			<div id="dialogListContent" class="x4">
				<div class="xgrid">
					<div class="x2">会话列表</div>
					<div class="x2">
						<button onclick="reloadDialogList();" class="btn btn-orange">刷新</button>
					</div>
				</div>

				<div>
					<ul id="dialogList">

					</ul>


				</div>
			</div>




		</div>
		<!-- #content -->

		<div id="footer">
			<div class="content_pad">
				<p>
					&copy; 2012-12 Copyright <a href="http://weibo.com/slevenc">Slevenc</a>.
					Powered by <a href="http://madebyamp.com/themes/dashboard/">Dashboard
						Admin</a>.
				</p>
			</div>
			<!-- .content_pad -->
		</div>
		<!-- #footer -->

	</div>
	<!-- #wrapper -->

	<script src="./js/jquery/jquery-1.5.2.min.js"></script>
	<script src="./js/jquery/jquery-ui-1.8.12.custom.min.js"></script>
	<script src="./js/misc/excanvas.min.js"></script>
	<script src="./js/jquery/facebox.js"></script>
	<script src="./js/jquery/jquery.visualize.js"></script>
	<script src="./js/jquery/jquery.dataTables.min.js"></script>
	<script src="./js/jquery/jquery.tablesorter.min.js"></script>
	<script src="./js/jquery/jquery.uniform.min.js"></script>
	<script src="./js/jquery/jquery.placeholder.min.js"></script>

	<script src="./js/widgets.js"></script>
	<script src="./js/dashboard.js"></script>
	<script src="./js/var.js"></script>

	<script type="text/javascript">
		$(document).ready(function() {

			loadAnnouncement();
			$(window).resize(function() {
				$("body").height($(window).height());
				$("body").width($(window).width());

			});

			$("body").height($(window).height());
			loadUnreadDialog();
			Dashboard.init();
			$("#dialogList").sortable();
			reloadDialogList();
			$("#useruser").after(parent.userInfo.user.nickname);
			setTimeout('getUnreadMsgCount()', 1000);
		});

		function getUnreadMsgCount() {
			count = parent.unReadMsgBox.length;
			if (count == 0) {
				$("#unreadMsgTip").text('没有未读的消息');
			} else {
				$("#unreadMsgTip").text('您有' + count + '条新消息');
			}
			setTimeout('getUnreadMsgCount()', 1000);
		}

		var opened = new Array();
		function isOpen(uid) {
			found = false;
			$.each(opened, function(k, v) {
				if (v == uid) {
					found = true;
				}
			});

			return found;
		}

		function reloadDialogList() {
			$("#dialogList").empty();
			$.each(parent.dialog, function(k, v) {
				d = $('<li class="ui-state-default">' + v.nickName + '</li>');
				d.dblclick(function() {
					if (!isOpen(v.id)) {
						opened.push(v.id);

						nd = getNewDialog(v);
						$("#content").append(nd);
						$(nd).dialog({
							height : 350,
							width : 500,
							resizable : false,
							close : function() {
								$(nd).remove();
								$.each(opened, function(kk, vv) {
									if (vv == v.id) {
										opened.splice(k);
									}
								});
							}
						});
					}
				});
				$("#dialogList").append(d);
			});
		}
		function getNewDialog(dialog) {
			d = $('<div title="与 '+dialog.nickName+' 聊天中"></div>');
			log = $('<div class="logDiv"></div>');
			loadLog(dialog, log);
			sends = $('<div class="sends"></div>');
			ta = $('<textarea class="sendta"></textarea>');
			btn = $('<button class="snedbtn btn btn-orange">发送</button>');
			btn.click(function() {
				sendbody = ta.val();
				ta.val('');
				$.post(getUrl(), {
					service : 'sendMsg',
					body : sendbody,
					reciver : dialog.id,
					sessionId : parent.sid
				}, function(data) {
					var jo = JSON.parse(data);
					dat = new Date();
					if (jo.state == 'success') {
						dialog.msgs.push({
							sender : -1,
							sendDate : (dat.getYear() + '-' + dat.getMonth()
									+ '-' + dat.getDate() + ' '
									+ dat.getHours() + ':' + dat.getMinutes()
									+ ':' + dat.getSeconds()),
							body : sendbody
						});
						log.scrollTop(log.height());
						loadLog(dialog, log);
					} else {
						parent.errorDisposer(jo.error);
					}
				});
			});
			sends.append(ta);
			sends.append(btn);

			ct = $('<div>');
			ct.append(log);
			ct.append(sends);
			d.append(ct);

			dialog.diadiv = log;
			return d;
		}

		function loadLog(dialog, div) {
			div.empty();

			$.each(dialog.msgs, function(k, v) {
				if (v.sender == -1) {
					div.append($("<div class='loghead mysend'></div>").text(
							'我 ' + v.sendDate));
				} else {
					div.append($("<div class='loghead othersend'></div>").text(
							dialog.nickName + ' ' + v.sendDate));
				}
				div.append($("<div class='logBody'></div>").text(v.body));

			});

		}

		function loadAnnouncement() {
			$.post(getUrl(), {
				service : 'getAnnouncement',
				sessionId : parent.sid,
			}, function(data) {
				jo = JSON.parse(data);
				if (jo.state == 'success') {
					disposerAnnouncement(jo.data.announcement);
				} else {
					parent.errorDisposer(jo.error);
				}
			})

		}

		function disposerAnnouncement(data) {
			$("#newMessageBoard").empty();
			$.each(data, function(k, v) {
				adiv = $("<div class='announcementBox'></div>");
				senddiv = $("<div class='announcementSender'></div>");
				datediv = $("<div class='announcementDate'></div>");
				contentdiv = $('<div class="announcementContent"></div>"');
				senddiv.text(v.sender);
				datediv.text(v.date);
				contentdiv.text(v.content);
				adiv.append(senddiv);
				adiv.append(datediv);
				adiv.append(contentdiv);
				$("#newMessageBoard").append(adiv);
			});
		}

		function loadUnreadDialog() {
			parent.dealUnread(reloadDialogList);

		}
	</script>

</body>

</html>